<template>
<div>
<div class="mp-ticket-group" v-for="scen of ticketList" :key="scen.id">
<h3 class="mp-ticket-type">
<span class="iconfont iconfont-icn">&#xe658;</span>
{{ scen.name }}
</h3>
<div class="mp-ticket-list"
v-for="item of scen.children"
:key="item.id"
@click="handleToggle(item.id)"
>
<div class="mp-ticket-type-info">
<h5 class="mp-ticket-type-name">{{ item.name }}</h5>
<div class="mp-ticket-type-price mp-price">
&yen;<em class="mp-price-num">{{ item.lowerPrice }}</em><span>起</span>
</div>
</div>
<scene :scene="item.children" v-show="showIds.includes(item.id)"></scene>
</div>
</div>
</div>
</template>

<script>
import Scene from './Scene.vue' // 引入Scene组件
export default {
  name: 'DetailsAbout',
  components: { // 注册Scene组件
    Scene
  },
  props: {
    ticketList: Array
  },
  data () {
    return {
      showIds: [] // 保存需要展开的场次的id
    }
  },
  methods: {
    handleToggle (id) {
      if (!this.showIds.includes(id)) {
        this.showIds.push(id)
      } else {
        let newIds = this.showIds.filter((item) => {
          return item !== id
        })
        this.showIds = newIds
      }
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
.mp-ticket-group
 background #FFFFFF
 margin-bottom 0.2rem
 .mp-ticket-type
  overflow hidden
  padding 0.26rem 0.2rem
  background #fff
  color #333
  font-size 0.36rem
  .iconfont-icn
    display inline-block
    width 0.36rem
    height 0.36rem
    top 0.26rem
    color white
    background url(//s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -0.45rem no-repeat
    margin-right 0.1rem
    background-size 0.4rem 3rem
 .mp-ticket-list
  overflow hidden
  position relative
  .mp-ticket-type-info
   position relative
   margin-bottom -0.02rem
   padding 0.24rem 0.2rem
   background #fff
   .mp-ticket-type-name
    margin-right 1.8rem
    color #333
    font-size 0.3rem
    line-height 0.48rem
   .mp-ticket-type-price
    right 0.46rem
    margin-top -0.28rem
    color #ff9800
    font-size 0.24rem
   .mp-price
    overflow hidden
    position absolute
    top 0.52rem
    height 0.4rem
    line-height 0.4rem
    .mp-price-num
     margin-left 0.04rem
     font-size 0.36rem
     span
       color #000000
</style>
